Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / rnode / RNodeTncPanel.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tff7b72<templateTff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 rounded-2xl shadow-xl overflow-hidden"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"px-4 sm:px-6 py-4 border-b border-gray-100 dark:border-zinc-800 flex items-center gap-2"Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"radio-tower" Te6edf3class=Ta5d6ff"size-5 text-green-500" Tff7b72/>

Tff7b72<h3 Te6edf3class=Ta5d6ff"font-bold text-gray-900 dark:text-zinc-100"Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"tools.rnode_flasher.configure_tnc"Tff7b72) Tff7b72}}

Tff7b72</h3>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"p-4 sm:p-6 space-y-4"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"grid grid-cols-2 gap-3"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"space-y-1"Tff7b72>

Tff7b72<label Te6edf3class=Ta5d6ff"rnf-input-label"Tff7b72>Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"tools.rnode_flasher.frequency"Tff7b72) Tff7b72}}Tff7b72</label>

Tff7b72<input

Te6edf3:value=Ta5d6ff"frequency"

Te6edf3type=Ta5d6ff"number"

Te6edf3class=Ta5d6ff"rnf-config-input"

@Te6edf3input=Ta5d6ff"$emit('update:frequency', Number($event.target.value))"

Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"space-y-1"Tff7b72>

Tff7b72<label Te6edf3class=Ta5d6ff"rnf-input-label"Tff7b72>Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"tools.rnode_flasher.tx_power"Tff7b72) Tff7b72}}Tff7b72</label>

Tff7b72<input

Te6edf3:value=Ta5d6ff"txPower"

Te6edf3type=Ta5d6ff"number"

Te6edf3class=Ta5d6ff"rnf-config-input"

@Te6edf3input=Ta5d6ff"$emit('update:txPower', Number($event.target.value))"

Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"space-y-1"Tff7b72>

Tff7b72<label Te6edf3class=Ta5d6ff"rnf-input-label"Tff7b72>Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"tools.rnode_flasher.bandwidth"Tff7b72) Tff7b72}}Tff7b72</label>

Tff7b72<select

Te6edf3:value=Ta5d6ff"bandwidth"

Te6edf3class=Ta5d6ff"rnf-config-input"

@Te6edf3change=Ta5d6ff"$emit('update:bandwidth', Number($event.target.value))"

Tff7b72>

Tff7b72<option Te6edf3v-for=Ta5d6ff"bw in bandwidths" Te6edf3:key=Ta5d6ff"bw" Te6edf3:value=Ta5d6ff"bw"Tff7b72>Tff7b72{{ Te6edf3bw Tff7b72/ T79c0ff1T79c0ff0T79c0ff0T79c0ff0 Tff7b72}} KHzTff7b72</option>

Tff7b72</select>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"space-y-1"Tff7b72>

Tff7b72<label Te6edf3class=Ta5d6ff"rnf-input-label"Tff7b72>Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"tools.rnode_flasher.spreading_factor"Tff7b72) Tff7b72}}Tff7b72</label>

Tff7b72<select

Te6edf3:value=Ta5d6ff"spreadingFactor"

Te6edf3class=Ta5d6ff"rnf-config-input"

@Te6edf3change=Ta5d6ff"$emit('update:spreadingFactor', Number($event.target.value))"

Tff7b72>

Tff7b72<option Te6edf3v-for=Ta5d6ff"sf in spreadingFactors" Te6edf3:key=Ta5d6ff"sf" Te6edf3:value=Ta5d6ff"sf"Tff7b72>

Tff7b72{{ Te6edf3sf Tff7b72}}

Tff7b72</option>

Tff7b72</select>

Tff7b72</div>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"grid grid-cols-2 gap-2"Tff7b72>

Tff7b72<button

Te6edf3class=Ta5d6ff"rnf-action-btn bg-green-600 !text-white !border-none hover:bg-green-700"

@Te6edf3click=Ta5d6ff"$emit('action', 'enable-tnc')"

Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"tools.rnode_flasher.enable"Tff7b72) Tff7b72}}

Tff7b72</button>

Tff7b72<button Te6edf3class=Ta5d6ff"rnf-action-btn" @Te6edf3click=Ta5d6ff"$emit('action', 'disable-tnc')"Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"tools.rnode_flasher.disable"Tff7b72) Tff7b72}}

Tff7b72</button>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import MaterialDesignIcon from "../MaterialDesignIcon.vue";

const BANDWIDTHS = [7800, 10400, 15600, 20800, 31250, 41700, 62500, 125000, 250000, 500000];

const SPREADING_FACTORS = [7, 8, 9, 10, 11, 12];

export default {

name: "RNodeTncPanel",

components: { MaterialDesignIcon },

props: {

frequency: { type: Number, default: 917375000 },

bandwidth: { type: Number, default: 250000 },

txPower: { type: Number, default: 22 },

spreadingFactor: { type: Number, default: 11 },

},

emits: ["update:frequency", "update:bandwidth", "update:txPower", "update:spreadingFactor", "action"],

data() {

return {

bandwidths: BANDWIDTHS,

spreadingFactors: SPREADING_FACTORS,

};

},

};

Tff7b72</script>

Tff7b72<style scopedTff7b72>

.rnf-input-label {

@apply text-[10px] font-bold text-zinc-400 uppercase tracking-widest;

}

.rnf-config-input {

@apply w-full bg-gray-50 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-800 text-gray-900 dark:text-zinc-100 text-[12px] rounded-lg focus:ring-1 focus:ring-blue-500/50 focus:border-blue-500 px-3 py-2 transition-all;

}

.rnf-action-btn {

@apply inline-flex items-center justify-center gap-1.5 rounded-xl bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 px-3 py-2.5 text-[11px] font-bold text-gray-700 dark:text-zinc-300 border border-gray-200 dark:border-zinc-700 transition-all active:scale-95;

}

Tff7b72</style>